<template>
	<div class="view-shipping">
		<van-nav-bar title="我的地址" left-arrow @click-left="$router.go(-1)" />
		<div class="address-list">
			<div class="address-item" v-for="(item,index) in addressList" :key="index">
				<div class="item_hd">
					<div class="name"></div>
					<div class="tel"></div>
					<div class="remark"></div>
				</div>
				<div class="item_bd"></div>
				<div class="item_ft">
					<van-button type="danger">删除</van-button>
					<van-button type="warning">编辑</van-button>
				</div>
			</div>
		</div>
		<div class="button-wrapper">
			<van-button class="create-button" type="primary" @click="createAddress()">新建收货地址</van-button>
		</div>	
		<van-popup v-model="showWriteAddressPage">
			<writeAddress :showFlag="showWriteAddressPage" @hide="hideCreatePage"/>
		</van-popup>
	</div>
</template>
<script>
	import Vue from 'vue'
	import { Popup } from 'vant';
	import writeAddress from "@/components/writeAddress"
	import userApi from "@/api/user"
	
	Vue.use(Popup);
	export default {
		data() {
			return {
				addressList: [],
				showWriteAddressPage:false
			}
		},
		methods: {
			getAddrList() {
				userApi.getAddressList(res => {
					this.addressList = res;
				})
			},
			initPage() {
				this.getAddrList();
			},
			createAddress() {
				this.showWriteAddressPage =true;
			},
			hideCreatePage(){
				this.showWriteAddressPage = false;
			}
		},
		created() {
			this.initPage();
		},
		components:{
			writeAddress
		}
	}
</script>
<style lang="less" scoped>
	.button-wrapper{
		position: fixed;
		bottom: 20px;
		left:0;
		width:100%;
		.van-button{
			width:90%;
		}
	}
	
</style>
